<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航案例分析1</title>
    <style>

        *{margin:0; padding:0; font-size:14px;}
        ul{
            /*
            1.把 边框去掉
            2. 把li标签上面的点号去掉
            */
            margin: 0;
            padding: 0;
            list-style-type: none;

        }
        li{
            /*
            给li标签整个增加背景颜色
            给li标签增加下面的分析
            */
            background-color: #8bd400;
            margin-bottom: 2px;
            height: 40px;
            width: 100px;
            border-radius: 5px;
            float: left;

        }

        a{
            /**
            把a标签的下划线去掉
             */
            display:block;
            height: 40px;
            text-decoration: none;
            /*
            把文字放在中间
            */
            text-align: center;
            /*
            把文字行间距和整个block一样,那么文字就居中了
            */
            line-height:40px;
            /*
            加上椭圆
            */

            border-radius: 5px;

        }

        /**
        当数据过去的时候,整体变成深绿色
         */
        a:hover{
            background-color: green;
        }

    </style>
</head>
<body>

<ul>
    <li>
        <a href="#">章节</a>
    </li>
    <li>
        <a href="#">问答</a>
    </li>
    <li>
        <a href="#">笔记</a>
    </li>
    <li>
        <a href="#">提问</a>
    </li>
</ul>
</body>
</html>